<template>
    <div>
        <el-table :data="data">
            <template v-for="(item, index) in tableOptions" :key="index">
                <el-table-column  :prop="item.prop" :label="item.label" :align="item.align" :width="item.width">
                    <template #default="scope">
                     <slot v-if="item.slot" :name="item.slot" :scope="scope"></slot>
                     <span v-else>{{ scope.row[item.prop!] }}</span>
                    </template>
                </el-table-column>
            </template>


            <el-table-column v-if="actionOptions" :prop="actionOptions.prop" :label="actionOptions.label"
                :align="actionOptions.align" :width="actionOptions.width">
                <template #default="scope">
                    <slot name="action" :scope="scope"></slot>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>

<script lang="ts" setup>
import { PropType, computed } from "vue"
import { TableOptions } from "./type"
let props = defineProps({
    options: {
        type: Array as PropType<TableOptions[]>,
        require: true
    },
    data: {
        type: Array<any[]>
    }
})
let tableOptions = computed(() => props.options!.filter(item => !item.action))
let actionOptions = computed(() => props.options!.find(item => item.action))
</script>
<style lang="scss" scoped></style>
